
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="js/prefixfree.min.js"></script>
        <style type="text/css">
        body {
		margin: 0;
        overflow: hidden;
	     }
	  #myCanvas {
		display: block;
	}
     #buttons{
      margin-top：0;
     }
	#button {
		font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
		position: absolute;
		font-size: 1.5em;
		text-transform: uppercase;
		padding: 7px 20px;
		left: 50%;
		width: 200px;
		margin-left: -100px;
		top: 75%;
		border-radius: 10px;
		color: white;
		text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
		border: 5px solid transparent;
		border-bottom-color: rgba(0,0,0,0.35);
		background: hsla(260, 100%, 50%, 1);
		cursor: pointer;
        bottom:40px;
		animation: pulse 1s infinite alternate;
		transition: background 0.4s, border 0.2s, margin 0.2s;
		
		}
	#button:hover {
		background: hsla(220, 100%, 60%, 1);
		margin-top: -1px;

		animation: none;
	}
	#button:active {
		border-bottom-width: 0;
		margin-top: 5px;
	}
	@keyframes pulse {
		0% {
			margin-top: 0px;
		}
		100% {
			margin-top: 6px; 
		} 
	}
        
        #show{ position:absolute;
	    margin-top:0px;
	    width:99%;
	    margin-left: 25%;
        margin-right: auto;
        z-index:2;
	    }
	   
        .item{position:absolute;
        	height:80px;width:100px;
        	background:#999999;border:1px solid #eeeeee;
        	cursor:pointer;}
        .item img{
　　          max-width:100%; 
　　          height:auto;
         }
        
         #buttons{
       position:relative;
       
        }
        </style>
        <script type="text/javascript">
         var len;
 var showerObj;
var listObj;
var showerWidth=800;
var showerHeight=400;
var r;
var cR=0;
var ccR=0;
var timer=0;
window.onload=function(){
 showerObj=document.getElementById("show");
 listObj=showerObj.getElementsByTagName("div");
 len=listObj.length;
 r=Math.PI/180*360/len;
 for(var i=0;i<len;i++){
 var item=listObj[i];
 item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
 item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
 item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
 item.onclick=function(){
  cR=Math.PI/2-this.rotate;
  timer || (timer=setInterval(rotate,10));
   
 }
  
 }
 var rX=showerObj.offsetLeft+showerWidth/2;
 var ry=showerObj.offsetTop+showerHeight/2;
  
 var rotate=function(){
 ccR=(ccR+2*Math.PI)%(2*Math.PI);
 if(cR-ccR<0) cR=cR+2*Math.PI;
 if(cR-ccR<Math.PI){
  ccR=ccR+(cR-ccR)/19;
 }else{
  ccR=ccR-(2*Math.PI+ccR-cR)/19;
  
 }
  
 if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))<Math.PI/720){
  ccR=cR;
  clearInterval(timer);
  timer=0;
 }
  
 for(var i=0;i<len;i++){
  var item=listObj[i];
  var w,h;
  var sinR=Math.sin(r*i+ccR);
  var cosR=Math.cos(r*i+ccR);
  w=60+0.6*60*sinR;
  h=(40+0.6*40*sinR);
  item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";
  
 }
 }
  
 document.getElementById("l").onclick=function(){
 cR=(cR+r+2*Math.PI)%(2*Math.PI);
 timer || (timer=setInterval(rotate,10));
 }
 document.getElementById("r").onclick=function(){
 cR=(cR-r+2*Math.PI)%(2*Math.PI);
 timer || (timer=setInterval(rotate,10));
 }
 rotate();
}
</script>
    </head>
   <body > 
     	
<div id="show">
<div class="item"><a href="news.jsp"></a><img src="img/html1.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html2.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html3.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html4.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html5.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html6.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html7.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html8.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html9.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html10.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html11.jpg"  alt="1"/></a></div>
<div class="item"><a href="news.jsp"></a><img src="img/html12.jpg"  alt="1"/></a></div>
</div>


<div id="buttons">
  <div style="clear:both;position:absolute;bottom:20px;left:200px">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
  </div>
  <a href="index.jsp"><button id="button">进入官网</button></a>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="js/index.js"></script>
</div>	

 	</body>
</html>